.hy-checkbox{
  display: flex;
  flex-wrap: wrap;
  &-item{
    padding: 2px 5px;
    cursor: pointer;
    position: relative;
    &.disabled{
      div{
        background-color: #ccc;
        border-color: #ccc;
      }
    }
    &.disabled:after{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      cursor: not-allowed;
    }
  }

  &-box{
    border: 1px solid rgba(0, 0, 0, .3);
    padding: 0 5px;
    border-radius: 3px;    
    &.on{
      border-color: #1582fa;
      background-color: #1582fa;
      color: #fff;
    }
  }
  &-default{
    display: flex;
    align-items: center;
    margin-right: 10px;
    &-select{
      margin-right: 5px;
      width: 14px;
      height: 14px;
      border: 1px solid rgba(0, 0, 0, .3);
      border-radius: 2px;
      cursor: pointer;
      background-color: #fff;
      &.on{
        background-color: #108ee9;
        border-color: #108ee9;
        position: relative;
      }
      &.half-select:after{
        transform: scale(1);
        position: absolute;
        top: 5px;
        display: table;
        width: 100%;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: " ";
        transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
      }
      &.on:after{
        transform: rotate(45deg) scale(1);
        position: absolute;
        left: 4px;
        top: 1px;
        display: table;
        width: 5px;
        height: 8px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: " ";
        transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
      }
    }
  }
  
}